<template>
  <div class="app">
    <div id="main_category4" ref="main" style="height: 260px;"> </div>
  </div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from "echarts";
export default {
  setup() {
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("main_category4"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '雷达图',
          textStyle: {
            fontSize: 15, //字体大小
          },
        },
        legend: {
          data: ['综合分析'],
          orient: 'vertical',
          top: '45%',
          right: 'left'
        },
        radar: {
          radius: '53%',
          center: ['35%', '60%'],
          indicator: [
            { name: '防爆', max: 6500 },
            { name: '穿透', max: 16000 },
            { name: '躲闪', max: 30000 },
            { name: '攻击', max: 38000 },
            { name: '速度', max: 52000 }
          ]
        },
        series: [
          {
            name: '综合分析',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              }
            ],
            color: '#739ffa'
          }
        ]
      });
    });
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>
<style>
.app {
  margin: 0;
}
</style>